<template>
  <view class="page">
    <uni-nav-bar
      :fixed="true"
      :statusBar="true"
      left-icon="left"
      title="发布车源"
      @clickLeft="back"
    />

    <view class="screenBox" :style="{ top: offsetTop + 'px' }">
      <view class="screenBox_status">
        <view
          class="screenBox_status_item"
          :class="{ screenBox_status_active: param.news_cars_status == 1 }"
          @click="setStatus(1)"
        >
          <image
            v-if="param.news_cars_status == 1"
            class="screenBox_status_item_icon"
            src="@/static/carSource-car1.png"
            mode="widthFix"
          ></image>
          <image
            v-else
            class="screenBox_status_item_icon"
            src="@/static/carSource-car2.png"
            mode="widthFix"
          >
          </image>
          <text>出售中</text>
        </view>
        <view
          class="screenBox_status_item"
          :class="{ screenBox_status_active: param.news_cars_status == 0 }"
          @click="setStatus(0)"
        >
          <image
            v-if="param.news_cars_status == 0"
            class="screenBox_status_item_icon"
            src="@/static/carSource-car1.png"
            mode="widthFix"
          ></image>
          <image
            v-else
            class="screenBox_status_item_icon"
            src="@/static/carSource-car2.png"
            mode="widthFix"
          >
          </image>
          <text>已下架</text>
        </view>
      </view>
      <view class="screenBox_params">
        <view class="screenBox_params_item" @click="_showParamDetail(0)">
          <view class="screenBox_params_item_show">
            <view class="screenBox_params_item_show_value text-overflow1"
              >选择车型</view
            >
            <image
              class="screenBox_params_item_show_icon"
              src="@/static/downArrorw-black.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view class="screenBox_params_item" @click="_showParamDetail(1)">
          <view class="screenBox_params_item_show">
            <view class="screenBox_params_item_show_value text-overflow1"
              >外观/内饰</view
            >
            <image
              class="screenBox_params_item_show_icon"
              src="@/static/downArrorw-black.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view class="screenBox_params_item" @click="_showParamDetail(2)">
          <view class="screenBox_params_item_show">
            <view class="screenBox_params_item_show_value text-overflow1"
              >全部地区</view
            >
            <image
              class="screenBox_params_item_show_icon"
              src="@/static/downArrorw-black.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <view
      class="screenBoxOverlay"
      v-if="showParamDetail"
      @click="showParamDetail = false"
    >
      <view
        class="screenBoxPopup"
        :style="{ marginTop: offsetTop + 106 + 'px' }"
        @tap.stop="showParamDetail = true"
      >
        <view class="brand-list" v-if="paramTabIndex == 0">
          <view
            class="brand-item"
            v-for="(item, index) in models"
            :key="index"
            @tap.stop="setModels(item)"
          >
            <view
              class="brand-item_name"
              :class="{ 'text-blue': search.brand_id == item.id }"
              >{{ item.name }}
            </view>
            <view class="brand-item_num">{{ item.num }}条</view>
          </view>
        </view>
        <view class="wgns" v-if="paramTabIndex == 1">
          <view class="wgns_item">
            <view class="wgns_item_name">外观</view>
            <view class="wgns_item_list">
              <block v-for="(item, index) in colors.appearance" :key="index">
                <view
                  class="wgns_item_list_item"
                  @click="search.appearance_name = item.name"
                  :class="{
                    wgns_item_list_active: item.name === search.appearance_name,
                  }"
                >
                  {{ item.name }}({{ item.num }})
                </view>
              </block>
            </view>
          </view>
          <view class="wgns_item">
            <view class="wgns_item_name">内饰</view>
            <view class="wgns_item_list">
              <block v-for="(item, index) in colors.interior" :key="index">
                <view
                  class="wgns_item_list_item"
                  @click="search.interior_name = item.name"
                  :class="{
                    wgns_item_list_active: item.name === search.interior_name,
                  }"
                >
                  {{ item.name }}({{ item.num }})
                </view>
              </block>
            </view>
          </view>
          <view class="wgns_bottom">
            <view
              class="wgns_bottom_btn wgns_bottom_reset"
              @tap.stop="
                (search.appearance_name = ''), (search.interior_name = '');
              "
              >重置</view
            >
            <view
              class="wgns_bottom_btn wgns_bottom_confirm"
              @tap.stop="_getList(true)"
              >查看车源
            </view>
          </view>
        </view>
        <view class="area" v-if="paramTabIndex == 2 && citys.length > 0">
          <scroll-view class="area_left" :scroll-y="true">
            <view
              class="area_item border-bottom"
              v-for="(item, index) in citys"
              :key="index"
              @tap.stop="setProvince(index, item)"
            >
              <view class="area_name">{{ item.name }}</view>
            </view>
          </scroll-view>
          <scroll-view class="area_right" :scroll-y="true">
            <view
              class="area_item border-bottom"
              v-for="(item, index) in citys[citysIndex].children"
              :key="index"
              @tap.stop="setCity(item)"
            >
              <view class="area_name">{{ item.name }}</view>
              <view class="area_num">{{ item.num }}条</view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <scroll-view
      :style="{ height: `calc(100vh - ${offsetTop + 88}px)` }"
      scroll-y="true"
      class="list"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="45"
      @refresherrefresh="onRefresh"
      @scrolltolower="_getList(false)"
    >
      <view class="list_item" v-for="(item, index) in list.data" :key="index">
        <view class="list_item_top">
          <view
            class="list_item_left"
            v-if="isEdit"
            @click="clickCheckbox(item, index)"
          >
            <image
              v-if="item.checked"
              class="list_item_left_img"
              src="@/static/check-mark.png"
              mode=""
            >
            </image>
            <image
              v-else
              class="list_item_left_img"
              src="@/static/check-no.png"
              mode=""
            ></image>
          </view>
          <view class="list_item_right">
            <view class="list_item_name marginBottom20">
              <text style="flex: 1">{{ item.cars_name }}</text>
              <view class="topping-box" v-if="item.topping">顶</view>
            </view>
            <view class="list_item_desc marginBottom20"
              >{{ item.source_type_source_name }}
              {{ item.appearance_interior }} {{ item.location_name }}
            </view>
            <view class="list_item_price marginBottom20">
              <text
                class="boldPrice"
                style="margin-right: 0"
                v-if="item.remarks_name"
                >{{ item.remarks_name }}：</text
              >
              <text class="boldPrice"
                >{{ item.price }}{{ item.price == "电议" ? "" : "万" }}</text
              >
              <text v-if="item.guide_price"
                >指导价：{{ item.guide_price }}万
                <text style="margin-left: 10rpx" v-if="item.quotation_name"
                  >| {{ item.quotation_name }}</text
                ></text
              >
            </view>
            <view class="list_item_time marginBottom20"
              >发布时间：{{ item.create_time }}</view
            >
          </view>
        </view>
        <view class="list_item_bottom" v-if="!isEdit">
          <view
            @tap.stop="seItemTop(item, index)"
            v-if="param.news_cars_status == 1"
            class="list_item_bottom_btn"
            >置顶</view
          >
          <view
            v-if="param.news_cars_status == 1"
            @tap.stop="setItemStatus([item.id], 0)"
            class="list_item_bottom_btn"
            >下架</view
          >
          <view
            v-if="param.news_cars_status == 0"
            @tap.stop="setItemStatus([item.id], 1)"
            class="list_item_bottom_btn"
            >上架</view
          >
          <view
            @tap.stop="jumpUrl('/pages/carSource/push/edit?id=' + item.id)"
            class="list_item_bottom_btn"
            >编辑
          </view>
          <view
            @tap.stop="setItemPrice(item, index)"
            class="list_item_bottom_btn"
            >改价</view
          >
        </view>
      </view>
      <image
        class="emptyData"
        v-if="list.total == 0"
        src="@/static/empty.png"
        mode=""
      ></image>
    </scroll-view>
    <block v-if="param.news_cars_status == 1">
      <view class="tabBox" v-if="refreshTime > 0">
        <uni-countdown
          :show-day="false"
          :fontSize="10"
          color="#ffffff"
          splitorColor="#ffffff"
          :second="refreshTime"
        />
      </view>
      <view
        class="tabBox"
        :class="{ rotate: refreshLoading }"
        v-else
        @click="_refreshOrder()"
      >
        <image class="refresh" src="@/static/refresh.png" mode=""></image>
      </view>
    </block>
    <view class="fixed-bottom">
      <view v-if="isEdit" class="editOpt">
        <view class="checkedAll" @click="setCheckboxAll()">
          <image
            v-if="checkedAll"
            class="list_item_left_img"
            src="@/static/check-mark.png"
            mode=""
          ></image>
          <image
            v-else
            class="list_item_left_img"
            src="@/static/check-no.png"
            mode=""
          ></image>
          <text style="margin-left: 20rpx">全选</text>
        </view>
        <view class="btns">
          <view class="btn btn-plain" style="width: 160rpx" @click="handleDel()"
            >删除</view
          >
          <view
            v-if="param.news_cars_status == 1"
            class="btn btn-plain"
            style="width: 160rpx; margin-left: 20rpx"
            @click="handleUp(0)"
            >下架</view
          >
          <view
            v-else
            class="btn btn-plain"
            style="width: 160rpx; margin-left: 20rpx"
            @click="handleUp(1)"
            >上架
          </view>
          <view
            class="btn btn-plain-grap"
            style="width: 160rpx"
            @click="isEdit = false"
            >取消</view
          >
        </view>
      </view>
      <view v-else class="btns">
        <view class="btn" style="width: 340rpx" @click="showPush = true"
          >发布</view
        >
        <view class="btn btn-plain" style="width: 340rpx" @click="isEdit = true"
          >编辑</view
        >
      </view>
    </view>
    <view class="screenBoxOverlay2" v-if="showPush" @click="showPush = false">
      <view class="pushBox btns">
        <view
          class="btn btn-plain"
          style="width: 340rpx"
          @click="jumpUrl('/pages/carSource/select/type')"
        >
          <image
            class="btn_icon"
            src="@/static/carSource-push1.png"
            mode="heightFix"
          ></image>
          <text>单条发布</text>
        </view>
        <view
          class="btn btn-plain"
          style="width: 340rpx"
          @click="jumpUrl('/pages/carSource/push/multi')"
        >
          <image
            class="btn_icon"
            src="@/static/carSource-push1.png"
            mode="heightFix"
          ></image>
          <text>批量发布</text>
        </view>
      </view>
    </view>
    <uni-popup
      :safeAreaInsetBottom="false"
      ref="price"
      background-color="transparent"
    >
      <view class="selectBox">
        <view class="selectBox_title">报价优惠</view>
        <view class="quotationBox" v-if="itemInfo.guide_price">
          <block v-for="(item, index) in quotationOption">
            <view
              class="quotationBox_item"
              :class="{ quotationBox_active: index == itemInfo.quotation }"
              @click="setQuotation(index)"
            >
              {{ item.name }}
            </view>
          </block>
        </view>
        <view class="customBox">
          <view class="input-box">
            <input
              :adjust-position="false"
              @blur="keyboardHeight = 0"
              :cursorSpacing="20"
              v-model="price"
              type="digit"
              class="input"
              :placeholder="quotationOption[itemInfo.quotation].placeholder"
            />
            <view class="suffix">{{
              quotationOption[itemInfo.quotation].unit
            }}</view>
          </view>
          <view class="btn" style="width: 173rpx" @click="setCustomPrice()"
            >确定</view
          >
        </view>
      </view>
      <view :style="{ height: keyboardHeight + 'px' }"></view>
    </uni-popup>
  </view>
</template>

<script>
import {
  newsCarsList,
  newsCarsCondition,
  newsCarsColour,
  newsCarsCity,
  newsCarsRenewTime,
  newsCarsTopping,
  newsCarsStatusAll,
  newsCarsDeleteAll,
  newsCarsChangePrice,
} from "@/api/source.js";
export default {
  data() {
    return {
      keyboardHeight: 0,
      refreshLoading: false, //是否启动刷新动画
      _freshing: false,
      triggered: false,
      offsetTop: uni.getSystemInfoSync().statusBarHeight + 44 || 44,
      paramTabIndex: 0,
      showPush: false,
      showParamDetail: false,
      checkedAll: false,
      isEdit: false,
      refreshTime: 0,
      checkedIds: [],
      news_cars_renew: 1, //1：可进行更新 其他倒计时（时间戳）
      list: {
        current_page: 0,
        last_page: 1,
        per_page: 15,
        total: 0,
        data: [],
      },
      models: [],
      colors: {
        appearance: [],
        interior: [],
      },
      citys: [],
      citysIndex: 0,
      param: {
        users_id: "",
        news_cars_status: 1,
      },
      search: {
        brand_id: "",
        appearance_name: "",
        interior_name: "",
        city_id: "",
        page_num: 15,
        page: 1,
      },
      price: "",
      itemIndex: 0,
      itemInfo: {},
      quotationOption: {
        1: {
          short: "优惠",
          name: "优惠点数",
          unit: "点",
          placeholder: "请输入优惠点数",
        },
        2: {
          short: "优惠",
          name: "优惠万元",
          unit: "万元",
          placeholder: "请输入优惠钱数",
        },
        3: {
          short: "加价",
          name: "加价万元",
          unit: "万元",
          placeholder: "请输入加价钱数",
        },
        4: {
          short: "报价",
          name: "直接报价",
          unit: "万元",
          placeholder: "请直接输入价格",
        },
      },
    };
  },
  onLoad() {
    uni.hideTabBar();
  },
  async onShow() {
    const usersId = (await uni.getStorageSync("login").id) || "";
    if (usersId == "") {
      uni.navigateTo({
        url: "/pages/login/login",
      });
      return;
    } else {
      this.param.users_id = usersId;
    }
    this._getList(true);
    this._newsCarsCondition();
    this._newsCarsColour();
    this._newsCarsCity();
    uni.onKeyboardHeightChange((res) => {
      this.keyboardHeight = res.height;
    });
  },
  onUnload() {
    uni.offKeyboardHeightChange();
  },
  onReachBottom() {
    // this._getList(false);
  },
  methods: {
    handleDel() {
      if (this.checkedIds.length == 0) {
        uni.showToast({
          title: "至少选择一项",
          icon: "none",
          mask: true,
        });
        return;
      }
      newsCarsDeleteAll({
        id: this.checkedIds,
        users_id: this.param.users_id,
      }).then((res) => {
        this.isEdit = false;
        uni.showToast({
          title: res.message,
          icon: "none",
          mask: true,
        });
        this._getList(true);
      });
    },
    handleUp(state) {
      if (this.checkedIds.length == 0) {
        uni.showToast({
          title: "至少选择一项",
          icon: "none",
          mask: true,
        });
        return;
      }
      this.setItemStatus(this.checkedIds, state);
      this.isEdit = false;
    },
    setStatus(val) {
      this.param.news_cars_status = val;
      this._getList(true);
    },
    setProvince(index, item) {
      this.citysIndex = index;
      if (item.id == "") {
        this.search.city_id = "";
        this._getList(true);
      }
    },
    setCity(item) {
      this.search.city_id = item.id || "";
      this._getList(true);
    },
    setModels(item) {
      this.search.brand_id = item.id;
      this._getList(true);
    },
    seItemTop(item, index) {
      newsCarsTopping({
        id: item.id,
        users_id: this.param.users_id,
        topping: item.topping > 0 ? 0 : 1,
      }).then((res) => {
        uni.showToast({
          title: res.message,
          icon: "none",
          mask: true,
        });
        this._getList(true);
      });
    },
    setItemStatus(id, news_cars_status) {
      newsCarsStatusAll({
        id,
        news_cars_status,
        users_id: this.param.users_id,
      }).then((res) => {
        uni.showToast({
          title: res.message,
          icon: "none",
          mask: true,
        });
        this._getList(true);
      });
    },
    setItemPrice(item, index) {
      this.itemInfo = item;
      this.itemIndex = index;
      this.$refs.price.open("bottom");
    },
    setQuotation(index) {
      this.price = "";
      this.itemInfo.quotation = index;
    },
    setCustomPrice() {
      let that = this;
      if (this.price == "") {
        uni.showToast({
          title: this.quotationOption[this.itemInfo.quotation].placeholder,
          icon: "none",
          mask: true,
        });
        return;
      }
      let param = {
        id: this.itemInfo.id,
        users_id: this.param.users_id,
        model_two_id: this.itemInfo.model_two_id,
        quotation: this.itemInfo.quotation,
        quotation_price: parseInt(this.price),
      };
      // console.log(JSON.stringify(param));
      newsCarsChangePrice(param).then((res) => {
        that.$refs.price.close();
        uni.showToast({
          title: res.message,
          icon: "none",
          mask: true,
        });
        this._getList(true);
      });
    },
    _getList(refresh) {
      this.showParamDetail = false;
      let that = this;
      if (refresh) {
        this.isEdit = false;
        this.checkedIds = [];
        var page = 1;
        that.list.last_page = 1;
      } else {
        var page = that.list.current_page + 1;
      }
      let param = this.param;
      Object.assign(param, this.search);
      param.page = page;
      if (page <= that.list.last_page) {
        newsCarsList(param).then((result) => {
          that.refreshLoading = false;
          that.news_cars_renew = result.data.news_cars_renew;
          if (that.news_cars_renew != 1) {
            that.refreshTime = that.news_cars_renew;
          } else {
            that.refreshTime = 0;
          }
          let list = result.data.list;
          if (list.current_page > 1) {
            that.list.current_page = list.current_page;
            list.data.map((item) => {
              item.checked = false;
              that.list.data.push(item);
            });
          } else {
            that.list = list;
            that.list.data = list.data.map((item) => {
              item.checked = false;
              return item;
            });
          }
          // uni.stopPullDownRefresh();
        });
      }
    },
    async onRefresh() {
      let that = this;
      if (this._freshing) return;
      this.triggered = true;
      this._freshing = true;
      await this._getList(true);
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 1000);
    },
    _newsCarsCondition() {
      let param = this.param;
      Object.assign(param, this.search);
      newsCarsCondition(param).then((res) => {
        this.models = res.data || [];
      });
    },
    _newsCarsColour() {
      let param = this.param;
      Object.assign(param, this.search);
      newsCarsColour(param).then((res) => {
        this.colors = res.data;
      });
    },
    _newsCarsCity() {
      let param = this.param;
      Object.assign(param, this.search);
      newsCarsCity(param).then((res) => {
        this.citys = res.data || [];
      });
    },
    _refreshOrder() {
      this.refreshLoading = true;
      newsCarsRenewTime({
        users_id: this.param.users_id,
      }).then((res) => {
        this._getList(true);
      });
    },
    jumpUrl(url) {
      uni.navigateTo({
        url,
      });
    },
    clickCheckbox(item, index) {
      this.list.data[index].checked = !this.list.data[index].checked;
      this.setCheckedIds();
      this.checkboxIsAll();
    },
    checkboxIsAll() {
      const hasFalse = this.list.data.find((obj) => obj.checked === false);
      if (hasFalse) {
        this.checkedAll = false;
      } else {
        this.checkedAll = true;
      }
    },
    setCheckboxAll() {
      this.checkedAll = !this.checkedAll;
      this.list.data.map((item) => {
        item.checked = this.checkedAll;
      });
      this.setCheckedIds();
    },
    setCheckedIds() {
      let ids = [];
      this.list.data.map((item) => {
        if (item.checked) {
          ids.push(item.id);
        }
      });
      console.log(ids);
      this.checkedIds = ids;
    },
    _showParamDetail(index) {
      if (this.paramTabIndex == index) {
        this.showParamDetail = !this.showParamDetail;
      } else {
        this.showParamDetail = true;
      }
      this.paramTabIndex = index;
    },
    back() {
      uni.navigateBack({
        fail() {
          uni.switchTab({
            url: "/main/home/index/index",
          });
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  padding-bottom: 162rpx;
}

/deep/.uni-navbar--border {
  border-bottom-width: 0 !important;
}

.screenBox {
  width: 100%;
  position: fixed;
  z-index: 998;
  top: 64px;
  left: 0;
  background-color: #fff;

  &_status {
    padding: 20rpx 28rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    &_item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 340rpx;
      height: 92rpx;
      background: #f7f8fa;
      border-radius: 14rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;

      &_icon {
        width: 54rpx;
        height: 40rpx;
        margin-right: 18rpx;
      }
    }

    &_active {
      background: #2d56c5;
      color: #ffffff;
    }
  }

  &_params {
    display: flex;
    justify-content: space-between;

    &_item {
      padding: 30rpx 28rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;

      &_show {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;

        &_icon {
          width: 16rpx;
          height: 10rpx;
          margin-left: 12rpx;
        }
      }
    }
  }
}

.screenBoxOverlay2 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.2);
}

.screenBoxOverlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.2);

  .screenBoxPopup {
    padding-top: 9px;
    max-height: calc(100vh - 260px);
    overflow: auto;
    background: #ffffff;
    border-radius: 0rpx 0rpx 14rpx 14rpx;

    .brand-list {
      padding: 0 28rpx;
      box-sizing: border-box;

      .brand-item {
        padding: 30rpx 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #f2f2f2;

        &_name {
          font-size: 28rpx;
          color: #000000;
        }

        &_num {
          font-size: 24rpx;
          color: #999999;
        }
      }

      .brand-item:last-child {
        border: none;
      }
    }

    .wgns {
      padding: 28rpx;
      box-sizing: border-box;

      &_item {
        margin-bottom: 49rpx;

        &_name {
          font-size: 30rpx;
          font-weight: 800;
          color: #000000;
          margin-bottom: 30rpx;
        }

        &_list {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          &_item {
            padding: 18rpx 31rpx;
            box-sizing: border-box;
            background: #f7f8fa;
            border-radius: 30rpx;
            font-size: 24rpx;
            color: #000000;
            margin: 0 16rpx 20rpx 0;
          }

          &_active {
            background: #0e59ea;
            color: #ffffff;
          }
        }
      }

      &_bottom {
        display: flex;
        justify-content: space-between;

        &_btn {
          width: 274rpx;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          background: #f2f2f2;
          border-radius: 14rpx;
          font-size: 28rpx;
          color: #000000;
        }

        &_confirm {
          width: 400rpx;
          color: #ffffff;
          background: #0e59ea;
        }
      }
    }

    .area {
      display: flex;

      &_left {
        height: calc(100vh - 270px);
        padding: 0 28rpx;
        box-sizing: border-box;
        width: 204rpx;
      }

      &_right {
        height: calc(100vh - 270px);
        padding: 0 28rpx;
        box-sizing: border-box;
        width: calc(100% - 204rpx);
        border-left: 1rpx solid #f2f2f2;
        // box-shadow: -5px 0px 16rpx rgba(0, 0, 0, 0.1);
      }

      &_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 85rpx;
      }

      &_name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
      }
    }
  }
}

.list {
  flex: 1;
  padding: 250rpx 28rpx 0;
  box-sizing: border-box;

  &_item {
    padding: 30rpx 20rpx 0;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx;

    &_top {
      display: flex;
      align-items: flex-start;
    }

    &_left {
      width: 60rpx;

      &_img {
        width: 42rpx;
        height: 42rpx;
      }
    }

    &_right {
      flex: 1;
    }

    &_name {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 800;
      color: #000000;
      display: flex;
      flex-direction: row;
    }
    .topping-box {
      margin-left: 20rpx;
      background-color: #ec4b4b;
      color: #ffffff;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      font-size: 28rpx;
    }

    &_desc {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    &_price {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;

      .boldPrice {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 800;
        color: #ec4b4b;
        margin-right: 30rpx;
      }
    }

    &_time {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }

    &_bottom {
      padding: 20rpx 0;
      border-top: 1rpx solid #e6e6e6;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      &_btn {
        width: 150rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        background: #ffffff;
        border: 1px solid #999999;
        border-radius: 25rpx;
        box-sizing: border-box;
        margin-left: 18rpx;
      }

      &_btn:first-child {
        margin-left: 0;
      }
    }
  }
}

.marginBottom20 {
  margin-bottom: 20rpx;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 41rpx 28rpx;
  width: 100%;
  z-index: 98;
  background: #ffffff;
  box-shadow: 0rpx -6rpx 4rpx 0rpx rgba(204, 204, 204, 0.2);

  .editOpt {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .checkedAll {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #000000;
  }
}

.pushBox {
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  position: fixed;
  z-index: 998;
  bottom: 160rpx;
  left: 0;
  padding: 28rpx 30rpx;
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx 6rpx 4rpx 0rpx rgba(204, 204, 204, 0.2);
}

.tabBox {
  width: 100rpx;
  height: 100rpx;
  background: #2d56c5;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20rpx;
  position: fixed;
  right: 28rpx;
  bottom: 196rpx;
  z-index: 9;
}

.text-overflow1 {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.text-blue {
  color: #2d56c5 !important;
}

.border-bottom {
  border-bottom: 1rpx solid #f2f2f2;
}

.btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #2d56c5;
  border-radius: 14rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  &_icon {
    height: 32rpx;
    margin-right: 11rpx;
  }
}

.btn-plain {
  background: #ffffff;
  border: 1px solid #2d56c5;
  color: #2d56c5;
}

.btn-plain-grap {
  background: #ffffff;
  border: 1px solid #666666;
  color: #666666;
  margin-left: 20rpx;
}

.refresh {
  width: 74rpx;
  height: 63rpx;
}

.selectBox {
  padding: 40rpx 0 30rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 20rpx 20rpx 0rpx 0rpx;

  &_title {
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #000000;
    margin-bottom: 30rpx;
  }

  &_content {
    max-height: 50vh;
    overflow: auto;
    margin-bottom: 30rpx;
  }

  &_bottom {
    padding: 0 28rpx;
  }

  .quotationBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
    padding: 0 28rpx;
    box-sizing: border-box;

    &_item {
      width: 160rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      background: #ffffff;
      border: 1px solid #cccccc;
      border-radius: 4rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
    }

    &_active {
      background: #0e59ea;
      color: #ffffff;
      border: 1px solid #0e59ea;
    }
  }

  .customBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12rpx 28rpx;
    box-sizing: border-box;

    .input-box {
      flex: 1;
      padding-right: 23rpx;
      box-sizing: border-box;
      position: relative;

      .suffix {
        position: absolute;
        right: 36rpx;
        top: 26rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ff0f0f;
      }
    }

    .input {
      width: 100%;
      height: 92rpx;
      background: #f3f3f3;
      border-radius: 14rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      padding: 0 80rpx 0 24rpx;
      box-sizing: border-box;
    }
  }
}

.emptyData {
  width: 498rpx;
  margin: calc(50% - 200rpx) calc(50% - 249rpx) 0;
}

.rotate {
  animation: rotate 1s linear infinite;
  /* 动画名称、动画时长、动画速度曲线、无限循环 */
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>